function Item({ name, isPacked }) {
  // if (isPacked) {
  //   return null;
  // }

  // if (isPacked) {
  //   return <li className="item">{name}✔</li>;
  // }

  // return <li className="item">{isPacked ? <del>name + "✔"</del> : name}</li>;

  // return (
  //   <li className="item">
  //     {name} {isPacked && "✔"}
  //   </li>
  // );

  let content = name;

  if (isPacked) {
    content += "✔";
  }

  return <li className="item">{content}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride 的行李清单</h1>
      <ul>
        <Item isPacked={true} name="宇航服" />
        <Item isPacked={true} name="带金箔的头盔" />
        <Item isPacked={false} name="Tam 的照片" />
      </ul>
    </section>
  );
}
